<template>
  <view class="flex-col page">
  <u-search placeholder="输入关键词搜索" :showAction="false" :clearabled="false" v-model="keyword" margin="0 0 0 0"
			height="80rpx" bgColor="#f7f8fc"></u-search>
		   <!--<view class="tag-list">
			<view class="tag-list-box">
				<span>综合</span>
				<u-icon name="arrow-down-fill" color="#c6c7c8" size="28"></u-icon>
			</view>
			<view class="tag-list-box">
				<span class="active">新品</span>
				<u-icon name="arrow-down-fill" color="#2979ff" size="28"></u-icon>
			</view>
			<view class="tag-list-box">
				<span>销量</span>
				<u-icon name="arrow-down-fill" color="#c6c7c8" size="28"></u-icon>
			</view>
			<view class="tag-list-box">
				<span>价格</span>
				<u-icon name="arrow-down-fill" color="#c6c7c8" size="28"></u-icon>
			</view>
		</view> -->
    <u-empty  text="暂无收藏" style="margin-top: 200rpx;"></u-empty>
    <view class="flex-row goods-list">
      <view
        class="flex-col goods-list-box goods-list-item"
        v-for="(item, index) in 3"
        :key="index"
      >
        <view class="flex-col items-start">
          <image class="image_15" src="../../static/wx/a172a475ce3bdf8b6dc1eda491107028.png" />
          <text class="font_9 text_22 text_23"
            >加热鞋垫暖足贴加热鞋垫暖足贴加热鞋垫暖足贴</text
          >
          <text class="font_10 text_25">自发热暖宝宝</text>
        </view>
        <view class="mt-10 flex-row items-center group_10">
          <text class="font_5">￥19.5</text>
          <!-- <view style="display: flex; align-items: center">
            <image
              class="shrink-0 image_18 image_19"
              src="../../static/wx/bc36df84586e9202a50f65912343e35a.png" />
            <image
              class="shrink-0 image_16 image_17"
              src="../../static/wx/8a22762f483b718a2770f34e14df6152.png"
          /></view> -->
          <view class="del">取消收藏</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },

  methods: {},
};
</script>

<style scoped lang="css">
/* @import "@/static/jd/base.scss"; */
.ml-111 {
  margin-left: 222rpx;
}

.mt-29 {
  margin-top: 58rpx;
}

.mt-33 {
  margin-top: 66rpx;
}

.mt-23 {
  margin-top: 16rpx;
}

.ml-11 {
  margin-left: 22rpx;
}

.ml-15 {
  margin-left: 30rpx;
}

.ml-13 {
  margin-left: 26rpx;
}

.ml-19 {
  margin-left: 38rpx;
}

.mt-11 {
  margin-top: 22rpx;
}

.page {
  padding: 20rpx;

  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
}

.group {
  padding-left: 52rpx;
}

.image-wrapper {
  width: 64rpx;
}

.image_3 {
  width: 64rpx;
  height: 26rpx;
}

.image {
  width: 50rpx;
  height: 68rpx;
}

.image_2 {
  width: 48rpx;
  height: 52rpx;
}

.text-wrapper {
  padding: 12rpx 0;
  background-color: #ffffff;
  border-radius: 50%;
  width: 34rpx;
}

.pos {
  position: absolute;
  right: 0;
  top: 0;
}

.text {
  color: #f08000;
  font-size: 20rpx;
  font-family: Mukta;
  font-weight: 700;
  line-height: 12.6rpx;
}

.top-box {
  overflow-x: hidden;
}

.view {
  margin-left: 4rpx;
}

.section {
  padding: 32rpx;
  background-color: #ffffff26;
  border-radius: 40rpx;
  width: 638rpx;
}

.text_2 {
  color: #ffffff;
  font-size: 32rpx;
  font-family: Mukta;
  line-height: 29.72rpx;
}

.image_4 {
  width: 30rpx;
  height: 30rpx;
}

.image_5 {
  width: 178rpx;
  height: 248rpx;
  display: inline-block;
}

.section_2 {
  margin-bottom: 10rpx;
  padding: 20rpx 0 84rpx;
  background-color: #ffffffcc;
  border-radius: 32rpx;
  width: 178rpx;
  height: 238rpx;
  display: inline-block;
}

.section_5 {
  background-color: #d7e4ff;
  border-radius: 30rpx;
  width: 140rpx;
  height: 134rpx;
}

.image_6 {
  width: 108rpx;
  height: 186rpx;
}

.pos_2 {
  position: absolute;
  left: 50%;
  bottom: 18rpx;
  transform: translateX(-50%);
}

.tag-box {
  margin-bottom: 10rpx;
  padding: 16rpx 18rpx 32rpx;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 32rpx;
  width: 178rpx;
  height: 238rpx;
  display: inline-block;
}

.tag-box:last-child {
  margin-right: 30rpx;
}

.tag-box.active {
  background-color: rgba(255, 255, 255, 1);
}

.image-wrapper_2 {
  padding: 20rpx 0 14rpx;
  background-color: #d7e4ff;
  border-radius: 30rpx;
  margin-bottom: 20rpx;
}

.image_7 {
  width: 102rpx;
  height: 100rpx;
}

.font {
  font-size: 32rpx;
  font-family: Lantinghei SC;
  line-height: 30.12rpx;
  color: #000000;
}

.text_3 {
  margin-left: 8rpx;
  color: #16162e;
  line-height: 30.26rpx;
}

.tag-box-active {
  margin-bottom: 6rpx;
  padding: 16rpx 0 36rpx 16rpx;
  background-color: #d7e4ff99;
  border-radius: 40rpx 0 0 40rpx;
  box-shadow: 0rpx 14rpx 12rpx #f67b7b4d inset;
  width: 154rpx;
  height: 242rpx;
  display: inline-block;
}

.image-wrapper_3 {
  padding: 22rpx 0;
  background-color: #fdf2ec99;
  border-radius: 30rpx 0 0 30rpx;
}

.image_8 {
  width: 82rpx;
  height: 90rpx;
}

.text_4 {
  margin-left: 8rpx;
  line-height: 30rpx;
}

.list-box {
  width: 33.92rpx;
}

.font_2 {
  font-size: 28rpx;
  font-family: Mukta;
  line-height: 34rpx;
  color: #000000;
}

.font_4 {
  font-size: 28rpx;
  font-family: Mukta;
  line-height: 34rpx;
  font-weight: 600;
  color: #000000;
}

.tag_active .font_2 {
  font-size: 32rpx;
  font-weight: bold;
}

.line-box {
  margin-left: 12rpx;
  margin-top: 298rpx;
  background-color: #000000;
  width: 4rpx;
  height: 98rpx;
}

.line-box2 {
  margin-top: 110rpx;
}

.top-goods {
  margin-left: 32rpx;
  padding: 42rpx 0 58rpx;
  background-color: #ffffff;
  border-radius: 40rpx;
  width: 682rpx;
  height: 504rpx;
}

.horiz-list {
  margin-left: 12rpx;
}

.top-goods-boxs {
  overflow-x: auto;
}

.top-goods-box {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
}

.horiz-list-item {
  padding: 112rpx 0 8rpx;
  width: 222rpx;
}

.horiz-list-item:last-child {
  margin-right: 30rpx;
}

.top-goods-box-name {
  padding: 108rpx 32rpx 44rpx;
  background-color: #d7e4ff;
  border-radius: 32rpx;
  width: 222rpx;
}

.font_3 {
  font-size: 28rpx;
  font-family: Lantinghei SC;
  line-height: 33rpx;
  color: #000000;
}

.text_9 {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 显示的行数，可自行修改 */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.font_5 {
  font-size: 28rpx;
  font-family: Mukta;
  line-height: 20.46rpx;
  color: #000000;
}

.image_9 {
  width: 180rpx;
  height: 192rpx;
}

.pos_3 {
  position: absolute;
  right: 16rpx;
  top: 12rpx;
}

.text_10 {
  text-align: center;
}

.image_10 {
  width: 170rpx;
  height: 186rpx;
}

.pos_4 {
  position: absolute;
  left: 50%;
  top: 10rpx;
  transform: translateX(-50%);
}

.group_5 {
  padding: 112rpx 0 8rpx;
  width: 198.28rpx;
}

.text-wrapper_2 {
  padding: 112rpx 0 32rpx;
  background-color: #d7e4ff;
  border-radius: 32rpx 0 0 32rpx;
  width: 198rpx;
}

.text_11 {
  text-align: center;
  width: 156rpx;
}

.image_11 {
  width: 124rpx;
  height: 152rpx;
}

.pos_5 {
  position: absolute;
  right: 24.28rpx;
  top: 48rpx;
}

.recommend {
  padding-top: 80rpx;
  background-color: #ffffff;
  border-radius: 60rpx 60rpx 0 0;
}

.recommend-box {
  padding-left: 56rpx;
  padding-right: 40rpx;
}

.font_6 {
  font-size: 36rpx;
  font-family: Laila;
  line-height: 34rpx;
  font-weight: 700;
  color: #3a7beb;
}

.text_16 {
  line-height: 33.94rpx;
}

.font_7 {
  font-size: 28rpx;
  font-family: Mukta;
  line-height: 26.46rpx;
  font-weight: 700;
  color: #979797;
}

.image_12 {
  border-radius: 40rpx;
  width: 398rpx;
  height: 490rpx;
}

.font_9 {
  font-size: 28rpx;
  font-family: Lantinghei SC;

  line-height: 33rpx;
  color: #000000;
}

.recommend-box-top {
  margin-right: 16rpx;
  margin-top: 6rpx;
  width: 200rpx;
}

.image_13 {
  border-radius: 30rpx;
  width: 218rpx;
  height: 180rpx;
}

.font_8 {
  font-size: 28rpx;
  font-family: Lantinghei SC;
  line-height: 42rpx;
  color: #000000;
}

.text_17 {
  margin-top: 24rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.text_18 {
  margin-top: -8rpx;
}

.image_14 {
  margin-top: 20rpx;
}

.text_19 {
  margin-top: 24rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.text_20 {
  margin-top: -8rpx;
}

.recommend-box-footer {
  margin-top: 56rpx;
}

.text_21 {
  line-height: 33.94rpx;
}

.goods-list {
  /* margin-right: 16rpx; */
  margin-top: 14rpx;
  flex-wrap: wrap;
}

.goods-list-box {
  flex: 1 1 304rpx;
}

.goods-list-item {
  padding: 16rpx 16rpx 40rpx;
  background-color: #f7f8fc;
  border-radius: 32rpx;

  height: 490rpx;
  margin-bottom: 20rpx;
  margin-right: 20rpx;
 max-width: 50%;
}

.goods-list-item:nth-child(2n) {
  margin-right: 0;
}

.image_15 {
  border-radius: 32rpx;
  width: 100%;
  height: 264rpx;
}

.text_22 {
  margin-left: 12rpx;
  margin-top: 24rpx;
}

.text_23 {
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.font_10 {
  font-size: 28rpx;
  font-family: Mukta;
  line-height: 26.46rpx;
  color: #9c9db9;
}

.text_25 {
  margin-left: 16rpx;
  margin-top: 8rpx;
  line-height: 25.98rpx;
}

.group_10 {
  padding: 0 8rpx;
  justify-content: space-between;
}

.image_18 {
  width: 26rpx;
  height: 22rpx;
}

.image_19 {
  margin-left: 36rpx;
}

.image_16 {
  width: 52rpx;
  height: 52rpx;
}

.image_17 {
  margin-left: 22rpx;
}

.text_24 {
  width: 200rpx;
}

.footer-goods {
  margin-top: 72rpx;
}

.text_26 {
  line-height: 33.94rpx;
}

.footer-goods-boxs {
  margin-right: 16rpx;
  margin-top: 44rpx;
  height: auto;
}

.section_11 {
  padding: 16rpx 18rpx;
  background-color: #f7f8fc;
  border-radius: 40rpx;
}

.image_20 {
  border-radius: 30rpx;
  width: 134rpx;
  height: 134rpx;
}

.text_27 {
  margin-top: 28rpx;
  line-height: 30.38rpx;
}

.font_11 {
  font-size: 28rpx;
  font-family: Lantinghei SC;
  color: #9c9db9;
}

.text_28 {
  margin-right: 72rpx;
  margin-top: -84rpx;
  line-height: 48rpx;
  width: 378rpx;
}

.group_13 {
  margin-top: 16rpx;
}

.text_29 {
  line-height: 26.46rpx;
}

.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 430rpx;
}

.scroll-view-top {
  white-space: nowrap;
  width: 100%;
}

.scroll-view-goods {
  white-space: nowrap;
  width: 600rpx;
}

/* 
::v-deep .u-search__content {
  background: rgba(255, 255, 255, 0.3) !important;
}

::v-deep .u-search__content__input {
  background: none !important;
  color: #fff !important;
}

::v-deep .u-search__content__input::placeholder {
  color: #fff !important;
}

::v-deep .u-search__content__icon .u-icon__icon {
  font-size: 50rpx !important;
  color: #fff !important;
} */

.top_fixd {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 0 10rpx 50rpx;
  background: #42a3f4;
  z-index: 99;
}

.mt-top {
  margin-top: 100rpx;
}

.tag-list {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin: 20px 0 0;
}
.tag-list-box {
  width: auto;
  display: flex;
  justify-content: space-around;
}
.tag-list-box .active {
  color: #2979ff;
}
.del {
  color: #2979ff;
  text-align: right;
}
</style>
